<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高外学生会——锁骨会</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6D28D9', // 主色调：深紫色
                        secondary: '#8B5CF6', // 辅助色：紫色
                        accent: '#EC4899', // 强调色：粉色
                        dark: '#1E1B4B', // 深色
                        light: '#F5F3FF', // 浅色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
            }
            .hover-lift {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-light text-dark antialiased">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300">
        <nav class="bg-white/90 backdrop-blur-md shadow-sm py-4 px-6 md:px-12">
            <div class="container mx-auto flex justify-between items-center">
                <a href="#" class="flex items-center space-x-2">
                    <div class="w-10 h-10 rounded-full bg-gradient-primary flex items-center justify-center">
                        <i class="fa fa-university text-white text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-primary">锁骨会</span>
                </a>
                
                <!-- 桌面导航 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#home" class="text-dark hover:text-primary transition-colors font-medium">首页</a>
                    <a href="#about" class="text-dark hover:text-primary transition-colors font-medium">关于我们</a>
                    <a href="#activities" class="text-dark hover:text-primary transition-colors font-medium">活动风采</a>
                    <a href="#members" class="text-dark hover:text-primary transition-colors font-medium">核心成员</a>
                    <a href="#join" class="text-dark hover:text-primary transition-colors font-medium">加入我们</a>
                    <a href="#contact" class="text-dark hover:text-primary transition-colors font-medium">联系我们</a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-dark focus:outline-none">
                    <i class="fa fa-bars text-2xl"></i>
                </button>
            </div>
        </nav>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto py-4 px-6 flex flex-col space-y-4">
                <a href="#home" class="text-dark hover:text-primary transition-colors py-2 border-b border-gray-100">首页</a>
                <a href="#about" class="text-dark hover:text-primary transition-colors py-2 border-b border-gray-100">关于我们</a>
                <a href="#activities" class="text-dark hover:text-primary transition-colors py-2 border-b border-gray-100">活动风采</a>
                <a href="#members" class="text-dark hover:text-primary transition-colors py-2 border-b border-gray-100">核心成员</a>
                <a href="#join" class="text-dark hover:text-primary transition-colors py-2 border-b border-gray-100">加入我们</a>
                <a href="#contact" class="text-dark hover:text-primary transition-colors py-2">联系我们</a>
            </div>
        </div>
    </header>

    <main>
        <!-- 英雄区域 -->
        <section id="home" class="pt-28 md:pt-32 pb-20 md:pb-32 bg-gradient-to-br from-primary/5 to-secondary/5">
            <div class="container mx-auto px-6 md:px-12">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0">
                        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-dark mb-6">
                            高外学生会<br><span class="text-primary">锁骨会</span>
                        </h1>
                        <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-xl">
                            我们是高外最具影响力的学生组织（没有之一），致力于培养学生领导力、创造力和社会责任感。
                        </p>
                        <div class="flex flex-wrap gap-4">
                            <a href="#about" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full font-medium transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                                了解更多
                            </a>
                            <a href="#join" class="bg-white hover:bg-gray-50 text-primary border-2 border-primary px-8 py-3 rounded-full font-medium transition-all shadow-md hover:shadow-lg transform hover:-translate-y-1">
                                加入我们
                            </a>
                        </div>
                    </div>
                    <div class="md:w-1/2 relative">
                        <iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114722519127128&bvid=BV12sNmzuENB&cid=30627072754&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="400px"></iframe>
                        </div>
                        <div class="absolute -bottom-6 -left-6 w-40 h-40 bg-accent/20 rounded-full blur-3xl"></div>
                        <div class="absolute -top-6 -right-6 w-40 h-40 bg-primary/20 rounded-full blur-3xl"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于我们 -->
        <section id="about" class="py-20 bg-white">
            <div class="container mx-auto px-6 md:px-12">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4">关于我们</h2>
                    <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                    <p class="text-gray-600 max-w-2xl mx-auto">探索锁骨会的定义、性质和判定</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                    <div class="bg-light rounded-xl p-8 shadow-md hover-lift">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-history text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4">成立背景</h3>
                        <p class="text-gray-600">
                            锁骨会成立于2025年，是高外历史最年轻的学生组织（没有之一）。最初由一群热爱锁骨佬、富有领导力的元老提出，旨在为同学们提供一个展示自我、锻炼锁骨的平台。
                        </p>
                    </div>

                    <div class="bg-light rounded-xl p-8 shadow-md hover-lift">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-bullseye text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4">我们的使命</h3>
                        <p class="text-gray-600">
                            锁骨会致力于培养具有全球视野、社会责任感和创新能力的领袖人才，通过组织各类活动，丰富校园文化生活，促进学生全面发展。
                        </p>
                    </div>

                    <div class="bg-light rounded-xl p-8 shadow-md hover-lift">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-eye text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4">我们的愿景</h3>
                        <p class="text-gray-600">
                            成为高外最具影响力、最多锁骨的学生组织，打造一个充满激情、富有创造力的学生会，为学校和社会培养更多人物。
                        </p>
                    </div>
                </div>

                <div class="mt-16 bg-gradient-primary rounded-2xl p-8 md:p-12 text-white">
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-2/3 mb-8 md:mb-0">
                            <h3 class="text-2xl md:text-3xl font-bold mb-4">我们的价值观</h3>
                            <p class="text-white/90 text-lg mb-6">
                                锁骨会秉承"调整、巩固、充实、提高"的方针，鼓励每一位成员发挥自己的潜能，在服务他人的同时实现自我提升。
                            </p>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 text-center">
                                    <i class="fa fa-users text-2xl mb-2"></i>
                                    <p class="font-medium">唱难听的歌</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 text-center">
                                    <i class="fa fa-lightbulb-o text-2xl mb-2"></i>
                                    <p class="font-medium">天天乱搞</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 text-center">
                                    <i class="fa fa-heart text-2xl mb-2"></i>
                                    <p class="font-medium">打胰岛素</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 text-center">
                                    <i class="fa fa-line-chart text-2xl mb-2"></i>
                                    <p class="font-medium">共同跳舞</p>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/3 md:pl-12">
                            <div class="relative">
                                <div class="absolute inset-0 bg-white/20 rounded-xl transform rotate-3"></div>
                                <div class="relative bg-white/10 backdrop-blur-sm rounded-xl p-6">
                                    <div class="flex items-center mb-4">
                                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                                            <img src="https://user-assets.sxlcdn.com/images/1115327/FoyuQ8hpJzSmXdBMe7CCdK8KUQRT.png?imageMogr2/strip/auto-orient/thumbnail/1200x9000%3E/quality/90!/interlace/1/format/jpeg" alt="游博显" class="w-full h-full object-cover">
                                        </div>
                                        <div>
                                            <h4 class="font-bold">游博显</h4>
                                            <p class="text-sm text-white/80">锁骨会会长</p>
                                        </div>
                                    </div>
                                    <p class="italic text-white/90">
                                        "土坡上的锁骨佬，肘得我眼泪掉"
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 活动风采 -->
        <section id="activities" class="py-20 bg-gray-50">
            <div class="container mx-auto px-6 md:px-12">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4">活动风采</h2>
                    <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                    <p class="text-gray-600 max-w-2xl mx-auto">探索我们天天被骂的行为</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 活动卡片 1 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover-lift">
                        <div class="relative h-64">
                            <img src="https://i1.hdslb.com/bfs/face/33292a73fe9f777f2dfc61fc1e7a8517201e1bf6.jpg@168w_168h_1c.webp" alt="谭老师好" class="w-full h-full object-cover">
                            <div class="absolute top-4 right-4 bg-primary text-white text-sm font-medium px-3 py-1 rounded-full">
                                文化活动
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">谭老师好</h3>
                            <p class="text-gray-600 mb-4">
                                一数学课一度的谭老师好是我们的传统活动，通过喊谭老师好等形式，展示学生的才艺和文化多元性，激发谭老师的好奇心，使手心刺痛。
                            </p>
                            <div class="flex items-center text-sm text-gray-500 mb-4">
                                <span class="mr-4"><i class="fa fa-calendar mr-1"></i> 每节数学课</span>
                                <span><i class="fa fa-users mr-1"></i> 5+ 参与者</span>
                            </div>
                            <a href="https://vip6{$rthSuffix}/404.html" class="text-primary font-medium hover:underline flex items-center">
                                查看详情 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- 活动卡片 2 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover-lift">
                        <div class="relative h-64">
                            <img src="https://i1.hdslb.com/bfs/face/33292a73fe9f777f2dfc61fc1e7a8517201e1bf6.jpg@168w_168h_1c.webp" alt="太糖了" class="w-full h-full object-cover">
                            <div class="absolute top-4 right-4 bg-accent text-white text-sm font-medium px-3 py-1 rounded-full">
                                打胰岛素
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">打胰岛素</h3>
                            <p class="text-gray-600 mb-4">
                                我们组织学生打胰岛素，开展friendly、热情关爱谈恋爱者及各种唐人等活动，培养学生的班级纪律责任感和辨别唐人能力。
                            </p>
                            <div class="flex items-center text-sm text-gray-500 mb-4">
                                <span class="mr-4"><i class="fa fa-calendar mr-1"></i> 每天</span>
                                <span><i class="fa fa-users mr-1"></i> 10+ 参与者</span>
                            </div>
                            <a href="https://vip6{$rthSuffix}/404.html" class="text-primary font-medium hover:underline flex items-center">
                                查看详情 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- 活动卡片 3 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-md hover-lift">
                        <div class="relative h-64">
                            <img src="https://picsum.photos/seed/activity3/600/400" alt="雅丽安训练营" class="w-full h-full object-cover">
                            <div class="absolute top-4 right-4 bg-secondary text-white text-sm font-medium px-3 py-1 rounded-full">
                                培训活动
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">雅丽安训练营</h3>
                            <p class="text-gray-600 mb-4">
                                每周多次的雅利安训练营，通过团队合作、户外运动、案例分析等活动，提升学生的运动力和团队协作能力。
                            </p>
                            <div class="flex items-center text-sm text-gray-500 mb-4">
                                <span class="mr-4"><i class="fa fa-calendar mr-1"></i> 每周</span>
                                <span><i class="fa fa-users mr-1"></i> 49 参与者</span>
                            </div>
                            <a href="https://vip6{$rthSuffix}/404.html" class="text-primary font-medium hover:underline flex items-center">
                                查看详情 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-12">
                    <a href="https://vip6{$rthSuffix}/404.html" class="inline-flex items-center px-6 py-3 border-2 border-primary text-primary font-medium rounded-full hover:bg-primary hover:text-white transition-colors">
                        查看更多活动（那很好了） <i class="fa fa-angle-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 核心成员 -->
        <section id="members" class="py-20 bg-white">
            <div class="container mx-auto px-6 md:px-12">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4">元老</h2>
                    <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                    <p class="text-gray-600 max-w-2xl mx-auto">认识我们优秀的元老</p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    <!-- 成员卡片 1 -->
                    <div class="bg-light rounded-xl overflow-hidden shadow-md hover-lift">
                        <div class="relative">
                            <img src="https://img.picui.cn/free/2025/06/26/685d2a3c61ef8.jpg" alt="罗正浩" class="w-full h-80 object-cover object-center">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 hover:opacity-100 transition-opacity flex items-end">
                                <div class="p-6 text-white">
                                    <p class="mb-2">大家好，我是罗正浩。我热爱锁骨佬，希望通过我们的努力，让锁骨会更加牛逼！</p>
                                    <div class="flex space-x-3 mt-4">
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-weixin text-xl"></i></a>
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-qq text-xl"></i></a>
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-envelope text-xl"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-1">罗正浩</h3>
                            <p class="text-primary mb-3">元老</p>
                            <p class="text-gray-600 text-sm">初三（19）班 | GPA: 114</p>
                        </div>
                    </div>

                    <!-- 成员卡片 2 -->
                    <div class="bg-light rounded-xl overflow-hidden shadow-md hover-lift">
                        <div class="relative">
                            <img src="https://img.picui.cn/free/2025/06/26/685d2ae3323b9.jpg" alt="杨天天" class="w-full h-80 object-cover object-center">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 hover:opacity-100 transition-opacity flex items-end">
                                <div class="p-6 text-white">
                                    <p class="mb-2">大家好，我叫杨天天。我热爱锁骨佬，期待和大家共同努力，助力锁骨会取得更大成就！</p>
                                    <div class="flex space-x-3 mt-4">
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-weixin text-xl"></i></a>
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-qq text-xl"></i></a>
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-envelope text-xl"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-1">杨天天</h3>
                            <p class="text-primary mb-3">元老</p>
                            <p class="text-gray-600 text-sm">初三（19）班 | GPA: 114514</p>
                        </div>
                    </div>

                    <!-- 成员卡片 3 -->
                    <div class="bg-light rounded-xl overflow-hidden shadow-md hover-lift">
                        <div class="relative">
                            <img src="https://img.picui.cn/free/2025/06/26/685d309c85c65.jpg" alt="王一哲" class="w-full h-80 object-cover object-center">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 hover:opacity-100 transition-opacity flex items-end">
                                <div class="p-6 text-white">
                                    <p class="mb-2">大家好，我是王一哲。我热爱锁骨佬，希望通过我们的协作，让锁骨会更加强大！</p>
                                    <div class="flex space-x-3 mt-4">
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-weixin text-xl"></i></a>
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-qq text-xl"></i></a>
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-envelope text-xl"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-1">王一哲</h3>
                            <p class="text-primary mb-3">元老</p>
                            <p class="text-gray-600 text-sm">初三（19）班 | GPA: 39</p>
                        </div>
                    </div>

                    <!-- 成员卡片 4 -->
                    <div class="bg-light rounded-xl overflow-hidden shadow-md hover-lift">
                        <div class="relative">
                            <img src="https://img.picui.cn/free/2025/06/26/685d312aba616.jpg" alt="杜泽浩" class="w-full h-80 object-cover object-center">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 hover:opacity-100 transition-opacity flex items-end">
                                <div class="p-6 text-white">
                                    <p class="mb-2">大家好，我是杜泽浩。我热爱锁骨佬，相信通过大家的努力，锁骨会必定会更出色！</p>
                                    <div class="flex space-x-3 mt-4">
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-weixin text-xl"></i></a>
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-qq text-xl"></i></a>
                                        <a href="#" class="text-white hover:text-primary transition-colors"><i class="fa fa-envelope text-xl"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-1">杜泽浩</h3>
                            <p class="text-primary mb-3">元老</p>
                            <p class="text-gray-600 text-sm">初三（19）班 | GPA: 3.9</p>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-12">
                    <a href="https://vip6{$rthSuffix}/members-single.html" class="inline-flex items-center px-6 py-3 border-2 border-primary text-primary font-medium rounded-full hover:bg-primary hover:text-white transition-colors">
                        查看全部成员 <i class="fa fa-angle-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 加入我们 -->
        <section id="join" class="py-20 bg-gradient-to-br from-primary/5 to-secondary/5">
            <div class="container mx-auto px-6 md:px-12">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4">加入我们</h2>
                    <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                    <p class="text-gray-600 max-w-2xl mx-auto">成为锁骨会的一员，一起创造锁骨</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <div class="bg-white rounded-xl p-8 shadow-md mb-8">
                            <h3 class="text-xl font-bold mb-4 flex items-center">
                                <i class="fa fa-lightbulb-o text-primary mr-3"></i> 为什么加入锁骨会？
                            </h3>
                            <ul class="space-y-4">
                                <li class="flex items-start">
                                    <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
                                        <i class="fa fa-check text-primary text-sm"></i>
                                    </div>
                                    <p>加入锁骨会？小可爱的，监考老师看见你胸口的会徽都得抖三抖！想抄谁抄谁，老师敢逼逼？一句“我锁骨会的”直接让他闭嘴滚蛋！挂科？不存在的，老子直接改成绩！</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
                                        <i class="fa fa-check text-primary text-sm"></i>
                                    </div>
                                    <p>饭时间人山人海？去他小可爱的排队！亮出锁骨会狗牌，直接挤到最前面，打饭阿姨手都不敢抖，肉菜堆成山！后面的人敢抱怨？瞪一眼就怂了：“卧槽，唐人老大，惹不起惹不起...”</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
                                        <i class="fa fa-check text-primary text-sm"></i>
                                    </div>
                                    <p>什么奖学金、助学金、实习名额、保研机会... 小可爱的，都是锁骨会内定的！优先喂饱自己人，外面的人汤都喝不上热乎的！跟着大佬混，好处拿到手软，数钱数到抽筋，爽翻天！</p>
                                </li>
                                <li class="flex items-start">
                                    <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
                                        <i class="fa fa-check text-primary text-sm"></i>
                                    </div>
                                    <p>你以为毕业就失业？放屁！锁骨会跟各大牛逼企业（或者校门口网吧、小吃摊）都有“深度合作”！毕业证到手，直接空降管理层，专治各种不服！能力？能力算个小可爱，老子有背景！</p>
                                </li>
                            </ul>
                        </div>

                        <div class="bg-white rounded-xl p-8 shadow-md">
                            <h3 class="text-xl font-bold mb-4 flex items-center">
                                <i class="fa fa-sitemap text-primary mr-3"></i> 部门设置
                            </h3>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div class="bg-light p-4 rounded-lg">
                                    <h4 class="font-bold mb-2 flex items-center">
                                        <i class="fa fa-calendar-check-o text-primary mr-2"></i> 低级人民法院
                                    </h4>
                                    <p class="text-gray-600 text-sm"> 我们™是这片地头说一不二的“低级法”！管你坤毛蒜皮还是惊天大案，到了老子这儿，老子说了算！判你赢你就牛逼上天，判你输你就给老子乖乖认栽！上诉？上你小可爱诉！低级法院的判决就是圣旨，懂？！</p>
                                </div>
                                <div class="bg-light p-4 rounded-lg">
                                    <h4 class="font-bold mb-2 flex items-center">
                                        <i class="fa fa-paint-brush text-primary mr-2"></i> 低级人民检察院
                                    </h4>
                                    <p class="text-gray-600 text-sm">老子们是“低检”，手握“逮人”和“告人”的生杀大权！看谁像坏人？抓！看谁不顺眼？查！证据？那玩意儿后面补也行！先抓了再说，进了局子还怕你不招？起诉成功率？必须99.99%！诉不倒你算老子输！牛逼不？</p>
                                </div>
                                <div class="bg-light p-4 rounded-lg">
                                    <h4 class="font-bold mb-2 flex items-center">
                                        <i class="fa fa-money text-primary mr-2"></i> 财务部
                                    </h4>
                                    <p class="text-gray-600 text-sm">任何经费，想从老子手里过？嘿嘿，先TM扒层皮下来！“管理费”、“手续费”、“润滑费”…名目老子随口编！没钱交？那你的项目就等着烂尾吧！学生活动？关老子屁事，钱进老子兜里才是正理！</p>
                                </div>
                                <div class="bg-light p-4 rounded-lg">
                                    <h4 class="font-bold mb-2 flex items-center">
                                        <i class="fa fa-users text-primary mr-2"></i> 外联部
                                    </h4>
                                    <p class="text-gray-600 text-sm">什么外交礼仪？狗屁！老子元老出门，别的学校学生会会长得给老子提鞋！谈判？谈你小可爱判！条件老子定，不接受？信不信老子找人在你们学校论坛发黑帖，喷死你们？合作？合作就是你们跪下叫爹，好处全归老子！</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="bg-white rounded-xl p-8 shadow-md">
                            <h3 class="text-xl font-bold mb-6">招新报名</h3>
                            <form>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                    <div>
                                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的姓名">
                                    </div>
                                    <div>
                                        <label for="grade" class="block text-sm font-medium text-gray-700 mb-1">年级</label>
                                        <select id="grade" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                            <option value="">请选择您的年级</option>
                                            <option value="freshman">初一</option>
                                            <option value="sophomore">初三</option>
                                            <option value="junior">初三</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-6">
                                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                                    <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的手机号码">
                                </div>

                                <div class="mb-6">
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                                    <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的电子邮箱">
                                </div>

                                <div class="mb-6">
                                    <label for="department" class="block text-sm font-medium text-gray-700 mb-1">意向部门</label>
                                    <select id="department" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                        <option value="">请选择您的意向部门</option>
                                        <option value="activity">低级人民法院</option>
                                        <option value="propaganda">低级人民检察院</option>
                                        <option value="finance">财务部</option>
                                        <option value="outreach">外交部</option>
                                        <option value="multiple">普通会员</option>
                                    </select>
                                </div>

                                <div class="mb-6">
                                    <label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">个人简介（特长、优势等）</label>
                                    <textarea id="introduction" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请简要介绍您的特长、优势以及为什么想加入锁骨会"></textarea>
                                </div>

                                <div class="flex items-center mb-6">
                                    <input id="agreement" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                    <label for="agreement" class="ml-2 block text-sm text-gray-600">
                                        我已阅读并同意<a href="#" class="text-primary hover:underline">《锁骨法》</a>
                                    </label>
                                </div>

                                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors">
                                    提交报名
                                </button>
                            </form>
                        </div>

                        <div class="mt-6 text-center">
                            <p class="text-gray-600">招新时间：2025年4月6日-9月7日</p>
                            <p class="text-gray-600">面试时间：待定</p>
                            <p class="text-gray-600">更多信息请联系我们</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系我们 -->
        <section id="contact" class="py-20 bg-white">
            <div class="container mx-auto px-6 md:px-12">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4">联系我们</h2>
                    <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                    <p class="text-gray-600 max-w-2xl mx-auto">有任何问题或建议，欢迎随时联系我们</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                    <div class="bg-light rounded-xl p-8 shadow-md">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-map-marker text-primary mr-3"></i> 我们的位置
                        </h3>
                        <div class="h-64 mb-4 rounded-lg overflow-hidden">
                            <!-- 地图占位 -->
                            <img src="https://youke1.picui.cn/s1/2025/07/12/68726b2b7b873.webp" alt="学校地图" class="w-full h-full object-cover">
                        </div>
                        <p class="text-gray-600 mb-2">
                            <i class="fa fa-building text-primary mr-2"></i> 学校：南昌外国语高新学校
                        </p>
                        <p class="text-gray-600">
                            <i class="fa fa-map-pin text-primary mr-2"></i> 锁骨会活动室：初三19班
                        </p>
                    </div>

                    <div class="bg-light rounded-xl p-8 shadow-md">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-comments text-primary mr-3"></i> 联系方式
                        </h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-weixin text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium mb-1">官方微信</h4>
                                    <p class="text-gray-600">扫码关注我们的公众号</p>
                                    <div class="text-center mt-4">
  <a href="https://vip6{$rthSuffix}/vx.html" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline font-medium">
    点击关注微信公众号
  </a>
</div>
                                </div>
                            </div>

                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-qq text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium mb-1">官方QQ</h4>
                                    <p class="text-gray-600">2156002378（高外锁骨会）</p>
                                </div>
                            </div>

                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-envelope text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium mb-1">电子邮箱</h4>
                                    <p class="text-gray-600">suoguhui@19ban.com</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-light rounded-xl p-8 shadow-md">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-commenting text-primary mr-3"></i> 留言反馈
                        </h3>
                        <form>
                            <div class="mb-4">
                                <label for="feedback-name" class="block text-sm font-medium text-gray-700 mb-1">您的姓名</label>
                                <input type="text" id="feedback-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的姓名">
                            </div>

                            <div class="mb-4">
                                <label for="feedback-email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                                <input type="email" id="feedback-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的电子邮箱">
                            </div>

                            <div class="mb-4">
                                <label for="feedback-subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                                <input type="text" id="feedback-subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入留言主题">
                            </div>

                            <div class="mb-6">
                                <label for="feedback-message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                                <textarea id="feedback-message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的留言内容"></textarea>
                            </div>

                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors">
                                提交留言
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-6 md:px-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                            <i class="fa fa-university text-white text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">锁骨会</span>
                    </div>
                    <p class="text-gray-400 mb-6">
                        高外学生会——锁骨会，一个充满活力和创造力的学生组织，致力于培养学生领导力和社会责任感。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-qq"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-envelope"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h4 class="text-lg font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                        <li><a href="#activities" class="text-gray-400 hover:text-white transition-colors">活动风采</a></li>
                        <li><a href="#members" class="text-gray-400 hover:text-white transition-colors">核心成员</a></li>
                        <li><a href="#join" class="text-gray-400 hover:text-white transition-colors">加入我们</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-bold mb-6">活动分类</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">文化活动</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">公益活动</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">学术活动</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">体育活动</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">艺术活动</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">培训活动</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-bold mb-6">联系我们</h4>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">南昌外国语高新学校</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-3"></i>
                            <span class="text-gray-400">81553165</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-3"></i>
                            <span class="text-gray-400">suoguhui@19ban.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-clock-o text-primary mr-3"></i>
                            <span class="text-gray-400">周一至周五: 7:30-18:30</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-white/10 mt-12 pt-8 text-center text-gray-400">
                <p>© 2025 游博显 版权所有</p>
                <p class="mt-2 text-sm">网站设计与开发：锁骨会创始人</p>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform translate-y-20 opacity-0 transition-all z-50">
        <i class="fa fa-chevron-up"></i>
    </button>

    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        const backToTop = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('bg-white', 'shadow-md');
                navbar.classList.remove('bg-white/90');
                
                backToTop.classList.remove('translate-y-20', 'opacity-0');
                backToTop.classList.add('translate-y-0', 'opacity-100');
            } else {
                navbar.classList.remove('bg-white', 'shadow-md');
                navbar.classList.add('bg-white/90');
                
                backToTop.classList.add('translate-y-20', 'opacity-0');
                backToTop.classList.remove('translate-y-0', 'opacity-100');
            }
        });
        
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
        
        // 返回顶部按钮
        backToTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 表单提交处理
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                alert('表单提交成功！我们不会尽快与您联系，你开心了吧。');
                form.reset();
            });
        });
    </script>
</body>
</html>
    